<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

	<div class="modal fade" id="modalCreate" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">Đóng</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">Thêm thông tin thuốc</h4>
				</div>
			<form action="create" id="createForm">
				<div class="modal-body">
					<div class="mb10 input-group">
						<span class="input-group-addon">Tên thuốc &nbsp; &nbsp;
							&nbsp; &nbsp; &nbsp; &nbsp;</span> <input type="text"
							class="form-control" placeholder="Name" name="medicineName" id="medicineName"
							required>
					</div>
					<div class="mb10 input-group">
						<span class="input-group-addon">Chỉ định &nbsp; &nbsp;&nbsp; &nbsp;
							&nbsp; &nbsp; &nbsp; &nbsp;</span> <input type="text"
							class="form-control" placeholder="Chỉ định" name="specialize" id="specialize">
					</div>
					<div class="mb10 input-group">
						<span class="input-group-addon">Chống chỉ định &nbsp; &nbsp;
							</span> <input type="text"
							class="form-control" placeholder="Chống chỉ định" name="contraindicated" id="contraindicated">
					</div>
					<div class="mb10 input-group">
						<span class="input-group-addon">Nhà sản xuất
							&nbsp; &nbsp; &nbsp; &nbsp;</span> <input type="text"
							class="form-control" placeholder="Description" name="description" id="description">
					</div>
					<div class="mb10 input-group" id="medicinePrice">
						<span class="input-group-addon">Giá &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
							&nbsp; &nbsp; &nbsp;</span> <input type="text" class="form-control" id="price"
							placeholder="Price" name="price">
					</div>
					<div class="mb10 input-group" id="medicineQuantity">
						<span class="input-group-addon">Số lượng &nbsp; &nbsp;&nbsp;
							&nbsp; &nbsp; &nbsp; &nbsp;</span> <input type="text"
							class="form-control" placeholder="Quantity" name="quantity" id="quantity">
					</div>
					<div class="mb10 input-group" id="medicineCategory">
						<span class="input-group-addon">Loại &nbsp; &nbsp; &nbsp;&nbsp;
							&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span> <select
							class="form-control" name='categoryID'>
							<c:forEach var="category" items="${categories}">
								<option value="${category.getId()}">${category.getName()}</option>
							</c:forEach>
						</select>
					</div>
					<div class="mb10 input-group">
						<span class="input-group-addon">Thành phần &nbsp; &nbsp;&nbsp;
							&nbsp;</span>
						<div>
							<input type="text" list="gradientItem" id="gradientCheckbox" name="gradientCheckbox"
								style="width: 100px;">
							
							<datalist id="gradientItem">
								<c:forEach var="gradient" items="${gradients}">
									<option onselect="gradientAdd()" value="${gradient.getName()}"/>${gradient.getId()}</option>
								</c:forEach>
							</datalist>
							<button type="button" class="btn btn-default" id="addtp" onclick="gradientAdd()">Thêm</button>
						</div>
					</div>
					<div class="mb10 input-group">
						<input type="text" id="txtIngradient" style="width: 300px;" name="gradientList">
					</div>
				</div>
				<div class="modal-footer">
					<button type="submit" class="btn btn-primary">Lưu</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">Đóng</button>
				</div>
			</form>
			</div>
		</div>
	</div>
<script>
	function gradientAdd(){
		var inputIngradient = document.getElementById("gradientCheckbox").value;
		var listIngradient = document.getElementById("txtIngradient").value;
		document.getElementById("txtIngradient").value = listIngradient + "," + inputIngradient;
	}
</script>